/**
 * 点击目标元素外部区域，执行某些操作
 */
import { onMounted, onUnmounted } from "vue";
import type { Ref } from "vue";

const useClickOutside = (
  elementRef: Ref<undefined | HTMLElement>, // 接收一个 Ref，指向需要监听外部的目标元素
  callback: (e: MouseEvent) => void // 接收一个回调函数，当点击外部时触发
) => {
  const handler = (e: MouseEvent) => {
    // 检查目标元素是否存在，并且事件的目标（e.target）是否存在
    if (elementRef.value && e.target) {
      // 判断点击的目标是否不在目标元素内部
      if (!elementRef.value.contains(e.target as HTMLElement)) {
        // 如果点击发生在目标元素外部，则调用回调函数
        callback(e);
      }
    }
  };
  onMounted(() => {
    document.addEventListener("click", handler);
  });
  onUnmounted(() => {
    document.removeEventListener("click", handler);
  });
};

export default useClickOutside;
